const plugin = require('tailwindcss/plugin')

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Source Han Sans SC', 'sans-serif'],
      },
      // variables: {
      //   'sidebar-size': '200px',
      //   'header-size': '55px',
      //   'sidebar-collapsed': '64px',
      //   'tag-bar-size': '50px',
      // },
      spacing: {
        'sidebar-size': '200px',
        'header-size': '55px',
        'sidebar-collapsed': '64px',
        'tag-size': '34px',
      },
      colors: {
        primary: '#8B5CFf',
        cusWhite: '#fff',
        cuGray: '#f1f1f1',
        blue: {
          light: '#85d7ff',
          default: '#1fb6ff',
          dark: '#009eeb',
        },
        pink: {
          light: '#ff7ce5',
          default: '#ff49db',
          dark: '#ff16d1',
        },
        gray: {
          darkest: '#1f2d3d',
          dark: '#3c4858',
          default: '#c0ccda',
          light: '#e0e6ed',
          lightest: '#f9fafc',
        },
      },
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
    plugin(({ addComponents }) => {
      addComponents({
      })
      addComponents({

      })
    }),
  ],
}
